<extend name="./public/frame.html"/>
<block name="content">
    <blockquote class="layui-elem-quote search" style="-webkit-margin-end: 0px;
">
        <div class="layui-inline">
            <select name="province" lay-filter="province_id" id="province_id" class="layui-input" style="width: 120px;" onchange="provinceChange();">
                <option value="">请选择省份</option>
                <volist name="province" id="vo">
                    <option value="{$vo['region_id']}">{$vo['region_name']}</option>
                </volist>
            </select>
        </div>
        <div class="layui-inline">
            <select name="city" id="city_id" class="layui-input" lay-filter="city_id" style="width: 120px;">
                <option value="">请选择城市</option>
            </select>
        </div>

        <div class="layui-input-inline">
            <button class="layui-btn" data-type="search">搜索</button>
            <button class="layui-btn layui-btn-disabled" data-type="" id="reset">复位</button>
            <button class="layui-btn layui-btn-warm" data-type="excel">导出数据</button>
        </div>
    </blockquote>

    <table class="layui-table" lay-filter="driver" id="dataList"></table>

    <script type="application/javascript">
        layui.use(['table', 'form', 'laydate'], function () {
            var table = layui.table
                , form = layui.form
                , laydate = layui.laydate;
            lay('.date').each(function () {
                laydate.render({
                    elem: this
                    , type: 'date'
                    , trigger: 'click'
                });
            });
            var tableIns = table.render({
                elem: "#dataList",
                url: "{$url}",
                cols: [[
                    {title: "省", field: 'province_name', width: 120,align: 'center'},
                    {title: "市", field: 'city_name', width: 120,align: 'center'},
                    {title: "注册人数", field: 'reg_city_count', width: 150,sort: true,align: 'center'},
                    {title: "app下载量", field: 'download_num', width: 150,sort: true,align: 'center'},
                    {title: "顺风车车主人数", field: 'driver_num', width: 150,sort: true,align: 'center'},
                    {title: "完成单数", field: 'total_complete_order', width: 150, sort: true,align: 'center'}

//                    {title: "操作", toolbar: '#barDemo', width: 350, align: 'center'}
                ]],
                page: true,
                limit: 10,
                done: function (res, curr, count) {
                    _cur_page = curr;
                    _cur_limit = res['limit'];
                    _count = count;
                }
            });

            var $ = layui.jquery, active = {
                search: function () {
                    var province_id = $.trim($('#province_id').val()),				//省份
                        city_id = $.trim($('#city_id').val());
                    var reset = $('#reset');
                    if (province_id || city_id) {
                        reset.removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');
                        tableIns.reload({
                            url: '/admin/Spread/search',
                            where: {
                                "province_id":province_id,
                                "city_id":city_id,
                            } //设定异步数据接口的额外参数
                        });
                    } else {
                        reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                        alert('搜索项不能为空');
                    }
                }
                , reset: function () {
                    var reset = $('#reset');
                    if (reset.data('type') !== '') {
                        tableIns.reload({
                            url: '{$url}',where:{}
                        });
                    }
                    $('.layui-input').each(function () {                        $(this).val('');                    });                $('.layui-this').each(function () {$(this).removeClass('layui-this');});
                    reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                }
                , excel: function () {
                    var province_id = $('#province_id').val(),
                        city_id = $('#city_id').val();
                    var str = "&province_id=" + province_id + "&city_id=" + city_id;
                    layer.confirm('请选择导出内容:', {
                        btn: ['全部数据', '当前页', '取消'] //可以无限个按钮
                        , btn3: function (index, layero) {
                            layer.close(index);
                        }
                    }, function (index, layero) {
                        //按钮【按钮一】的回调
                        location = "{:url('excel','all=1')}"+str ;
                        layer.close(index);
                    }, function (index) {
                        location = "{:url('excel','all=2')}" + str+"&page="+_cur_page+"&limit="+_cur_limit;
                        layer.close(index);
                    });
                }
            };

            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

        function provinceChange() {
            var province_id = $("#province_id").val();
            if(province_id == 0) {
                if(province_id == 0){
                    $("#city_id").empty();
                    $("#city_id").append('<option value=>请选择城市</option>');
                    return false;
                }
            }

            $.ajax({
                type: 'POST',
                url: "{:url('getCityList')}",
                data: {'province_id':province_id},
//                dataType:  'json',
                success:function(res){
                    $("select[name='city']").empty();
                    $("#city_id").append("<option value=''>全部城市</option>" + res);
                },
                error:function (res) {
                    layer.msg('请求错误');return false;
                }
            });
        }

    </script>
</block>
